<script setup lang="ts">
import { storeToRefs } from 'pinia';

import { errimage } from '#/base';
import { link1688stor } from '#/store';

const link1688 = link1688stor();
const { select1688skuitem, get1688SkuLoding } = storeToRefs(link1688);
</script>

<template>
  <a-spin :spinning="get1688SkuLoding">
    <div class="overflow-y-auto" style="height: 500px">
      <a-space :size="30" direction="vertical">
        <!-- <a-space
         
          direction="vertical"
        > -->
        <dly-tip-box
          v-for="item in select1688skuitem?.specInfo?.specValues || []"
          :key="item.propertyName"
          :title="item.propertyName"
        >
          <a-space wrap>
            <a-space
              v-for="sku in item.values"
              :key="sku.specId"
              :class="
                item.isselectid === sku.specId
                  ? 'border-orange-400 bg-gray-100'
                  : ''
              "
              class="cursor-pointer rounded-sm border border-gray-200 p-2 hover:bg-gray-100"
              @click="() => link1688.selectSkuItemChenge(item, sku)"
            >
              <a-image
                v-if="sku.skuImageUrl"
                :fallback="errimage"
                :src="sku.skuImageUrl || 'err'"
                :width="30"
                class="rounded-sm"
              />
              <a-tooltip :title="sku.valueName">
                <div class="w-32 truncate">{{ sku.valueName }}</div>
              </a-tooltip>
            </a-space>
          </a-space>
        </dly-tip-box>
        <!-- </a-space> -->
      </a-space>
    </div>
  </a-spin>
</template>
